<template>
  <div class="container">
    <scroll-view
      :scroll-y="true"
      :style="{'height': '100%'}"
      @scroll="scroll"
      @scrolltolower="pullrefresh"
    >
      <div class="mask" v-if="ismask" @click.stop="ismask=false"></div>
      <div class="itembox fadelogIn" v-if="ismask">
        <sorting @getVal="getTypeId"></sorting>
        <div class="box">
          <ul class="leftlist">
            <li
              v-for="(item,index) in items"
              :key="index"
              :class="{'active':leftCurrent == index}"
              class="item"
              @click="getLeft(index,item)"
            >{{item.name}}</li>
          </ul>
          <ul class="leftlist right">
            <li
              v-for="(item,index) in rightData"
              :key="index"
              class="item1"
              :class="{'active':rightCurrent == index}"
              @click="getRight(index,item)"
            >{{item.name}}</li>
          </ul>
        </div>
      </div>

      <div class="contentbox">
        <div class="sitckybox">
          <!-- <div class="nav" :class="statusBar>43?'navitem1':''">生活美容</div> -->
          <div class="nav" :style="{'padding-top':statusBar+'px'}">生活美容</div>
          <!-- 搜索框 -->
          <div class="inpbox">
            <div class="item">
              <div class="address">
                <a href="/pages/package_mall/select_city_new/main">
                  <img
                    src="https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/lifebeauty/3/gps.png"
                    alt
                    class="gps"
                  />
                  {{province_name}}
                </a>
              </div>
              <div class="box">
                <img
                  src="https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/3.1/chaxun%403x.png"
                  alt
                  class="icon"
                />
                <!-- <div class="inp" @click="tosearch">输入商户名、服务名、会员卡名称</div> -->
                <input type="text" class="inp" @click="tosearch" placeholder="输入商户名、服务名、会员卡名称…" />
              </div>
              <div class="msgbox">
                <img
                  src="https://img.ameimeika.com/h5_images/mp_images/mp_3.0/indexpage/ic_information@3x.png"
                  class="msg"
                  @click="tomessage"
                />
                <div class="tip" v-if="has_msg"></div>
              </div>
            </div>
          </div>
        </div>

        <div class="adlist">
          <ul class="ul ul1">
            <li class="li" v-for="(item,index) in level1" :key="index" @click="tolevel(item,1)">
              <img :src="ImgBaseUrl+item.image" alt class="img" />
              <span class="title">{{item.name}}</span>
            </li>
            <li class="li" @click="tolevel(item ,3)" v-if="level1.length>0">
              <img :src="ImgBaseUrl+'h5_images/lifebeauty/yimei.png'" alt class="img" />
              <span class="title">医美</span>
            </li>
          </ul>
          <ul class="ul ul2">
            <li v-for="(item,k) in level2" :key="k" class="li" @click="tolevel(item,2)">
              <img :src="ImgBaseUrl+item.image" alt class="img" />
              <span class="title">{{item.name}}</span>
            </li>
          </ul>
        </div>
        <!-- 广告位 -->
        <div class="adbox" v-if="adlist.length>3">
          <div class="banner" @click="todetail(adlist[0])">
            <img :src="ImgBaseUrl+adlist[0].image" alt class="img1" />
          </div>
          <div class="show">
            <div class="left" @click="todetail(adlist[1])">
              <img :src="ImgBaseUrl+adlist[1].image" alt class="img2" />
            </div>
            <div class="right">
              <img :src="ImgBaseUrl+adlist[2].image" alt class="img3" @click="todetail(adlist[2])" />
              <img :src="ImgBaseUrl+adlist[3].image" alt class="img4" @click="todetail(adlist[3])" />
            </div>
          </div>
        </div>

        <!-- 分类栏 -->
        <ul class="typelist" :style="{top:(sticketBoxHeight)+'px'}">
          <span
            class="li"
            v-for="(item,k) in typeList"
            :key="k"
            @click="checktype(k,item)"
            :class="{'active':current == k}"
          >{{item.name}}</span>
          <span style="color:transparent">1</span>
        </ul>
        <div class="sort" :style="{top:(sticketBoxHeight+36)+'px'}">
          <sorting @getVal="getTypeId" :sortText1="sortText" :num1="num"></sorting>
        </div>
        <div class="listbox">
          <shoplist :shoplist="shoplist" v-if="!empty"></shoplist>
          <div class="empty" v-if="empty">
            <img :src="imgUrl+'h5_images/mp_images/3.1/empty.png'" alt class="img" />
            <p class="text">即将上线，敬请期待</p>
          </div>
          <p class="bottomtext" v-if="isbottom">—— 因为甄选，所以珍稀 ——</p>
        </div>
      </div>
    </scroll-view>
  </div>
</template>

<script>
import shoplist from "@/components/life_list/life_list";
import sorting from "@/components/sort/sort";
import imageurl from "@/assets/js/image.js";
import common from "@/assets/js/mmk_common.js";
export default {
  data() {
    return {
      imgUrl: imageurl,
      ImgBaseUrl: common.image_response, //img 域名
      key: "",
      category_id: "",
      lng: "",
      lat: "",
      page: 1,
      district_id: "",
      space: "",
      city_id: "",
      province_id: 13,
      type: 1,
      space_type: "",
      shoplist: "",
      adlist: "", //广告列表
      level1: "", //一级分类
      level2: "",
      typeList: "", //分类推荐
      ismask: false,
      typeId: -1, //智能排序id
      items: [], //弹窗左边数据,
      leftCurrent: 0,
      rightCurrent: -1,
      rightData: [],
      sortText: "",
      popData: "",
      mark: -1, //智能排序标记点击到第几个元素
      current: 0,
      empty: false,
      isbottom: false,
      province_name: "",
      has_msg: false,
      statusBar: "",
      sticketBoxHeight: 0
    };
  },
  components: {
    shoplist,
    sorting
  },
  methods: {
    to_detail(item) {
      common.to_detail(item);
    },
    getCategory() {
      common.mmk_Loading(0);
      common.fly_post(
        "api/v4_2/life_category/category_list",
        {
          level: 1,
          is_top: 1
        },
        msg => {
          common.mmk_Loading(1);
          let res = msg.data;
          // console.log(res);
          if (res.status_code == 0) {
            this.level1 = res.data;
            // console.log(this.level1);
          } else {
            common.mmk_Loading(2, res.message);
            return false;
          }
        }
      );
      common.fly_post(
        "api/v4_2/life_category/category_list",
        {
          level: 2,
          is_top: 1
        },
        msg => {
          common.mmk_Loading(1);
          let res = msg.data;
          // console.log(res);
          if (res.status_code == 0) {
            this.level2 = res.data;
            // console.log(this.level1);
          } else {
            common.mmk_Loading(2, res.message);
            return false;
          }
        }
      );
      common.fly_post(
        "api/v4_2/life_category/category_list",
        {
          level: 1,
          is_top: 0
        },
        msg => {
          common.mmk_Loading(1);
          let res = msg.data;
          // console.log(res);
          if (res.status_code == 0) {
            this.typeList = res.data;
            // console.log(this.typeList);
          } else {
            common.mmk_Loading(2, res.message);
            return false;
          }
        }
      );
    },
    // 广告数据
    getAdvice() {
      common.mmk_Loading(0);
      common.fly_post(
        "api/v4_2/life_ads/ads_list",
        {
          type: this.type
        },
        msg => {
          common.mmk_Loading(1);
          let res = msg.data;
          // console.log(res);
          if (res.status_code == 0) {
            this.adlist = res.data;
            // console
          } else {
            common.mmk_Loading(2, res.message);
            return false;
          }
        }
      );
    },
    //店铺列表
    getData(e) {
      if (this.isbottom) {
        return false;
      }
      common.mmk_Loading(0);
      var obj = {
        key: this.key,
        category_id: this.category_id,
        lng: this.lng,
        lat: this.lat,
        page: this.page,
        district_id: this.district_id,
        space: this.space,
        city_id: this.city_id,
        province_id: this.province_id,
        type: this.most,
        space_type: this.space_type
      };
      let that = this;
      setTimeout(() => {
        common.fly_post("api/v4_2/life_shop/shop_list", obj, msg => {
          common.mmk_Loading(1);
          let res = msg.data;

          if (this.page == 1 && res.data.length > 0) {
            this.shoplist = res.data;
            if (res.data.length < 5) {
              this.isbottom = true;
            }
          } else if (res.data.length > 0 && this.page > 1) {
            // console.log(this.shoplist);
            this.shoplist = this.shoplist.concat(res.data);
          } else if (this.page > 1 && res.data.length == 0) {
            this.isbottom = true;
            // console.log(this.isbottom + '----312')
            // common.mmk_Loading(2, "没有更多了");
          }
          if (res.data.length == 0 && this.page == 1) {
            this.empty = true;
            this.isbottom = true;
          } else {
            this.empty = false;
          }
        });
      }, 200);
    },
    //弹窗数据
    getPopData() {
      common.fly_post(
        "api/v4_2/life_shop/shop_screen",
        {
          province_id: this.province_id
        },
        res => {
          common.mmk_Loading(1);
          // let res = msg.data;
          console.log(res);
          if (res.data && res.data.status_code == 0) {
            this.popData = res.data.data;
            // console.log(this.popData);
            this.items = res.data.data.city;
            this.rightData = this.items[0].area;
          }
        }
      );
    },
    getTypeId: function(e) {
      if (e.id !== 1) {
        this.ismask = true;
        // this.getShopList();
      } else if (e.id == 1 && e.mark) {
        this.space_type = 1;
        this.page = 1;
        this.getData();
      } else if (e.id == 1 && e.mark == false) {
        this.space_type = 0;
        this.page = 1;
        this.getData();
      }
      // window.removeEventListener("scroll", this.scrollEvent);
      this.leftCurrent = -1;
      // console.log(e)
      if (e.id == 1) {
        this.items = [];
        this.rightData = [];
        this.mark = 1;
      } else if (e.id == 2) {
        this.items = this.popData.city;
        // console.log(this.items);
        if (this.items[0].area) {
          this.rightData = this.items[0].area;
        }
        this.mark = 2;
      } else if (e.id == 3) {
        this.items = this.popData.order_by;
        this.rightData = [];
        this.mark = 3;
      }
    },
    getLeft(index, item) {
      // index为筛选栏左侧的菜单索引
      this.leftCurrent = index;
      this.rightData = item.area;
      this.rightCurrent = -1;
      this.isbottom = false;
      // this.upLoading = true;
      this.page = 1;
      // console.log(this.mark);
      // console.log(this.ismask);
      if (this.mark == 2) {
        this.city_id = item.id;
        this.rightData = item.area;
        //  this.num = item.name
        // console.log(this.ismask);
      } else if (this.mark == 3) {
        this.ismask = false;
        this.most = item.id;
        this.sortText = item.name;
        //  console.log(this.num4);
        this.getData();
      }
    },
    getRight(index, item) {
      // console.log(item);
      this.rightCurrent = index;
      this.city_id = item.city_id;
      this.district_id = item.id;
      this.isbottom = false;
      // this.upLoading = true;
      this.page = 1;
      this.getData();
      this.ismask = false;
      if (this.mark == 2) {
        this.num = item.name;
        //  console.log(this.sortText )
      }
    },
    checktype(index, item) {
      this.shoplist = [];
      this.current = index;
      // console.log(this.current)
      this.category_id = item.id; //一级分类的id
      this.page = 1;
      this.isbottom = false;
      // this.upLoading = true;
      this.getData();
    },
    tosearch() {
      wx.navigateTo({
        url: `/pages/package_lifebeauty/life_search/main`
      });
    },
    tolevel(item, e) {
      //跳到二级分类
      console.log(item);
      // console.log(e);
      if (e == 3) {
        //跳医美
        wx.switchTab({ url: "/pages/beauty_mall/main" });
      } else {
        wx.navigateTo({
          url: `/pages/package_lifebeauty/life_search/main?mark1=true&id=${
            item.id
          }
      &level=${e}&lng=${this.lng}&lat=${this.lat}&city_id=${
            this.city_id
          }&provice_id=${this.province_id}&typename=${item.name}`
        });
      }
    },
    pullrefresh(e) {
      if (!this.isbottom && this.shoplist.length > 0) {
        this.page++;
        this.getData();
      }
    },
    get_location() {
      let that = this;
      wx.authorize({
        scope: "scope.userLocation",
        success() {
          wx.getLocation({
            type: "gcj02",
            success(res) {
              that.lng = res.longitude; // 经度，浮点数，范围为-180~180，负数表示西经
              that.lat = res.latitude; // 纬度，浮点数，范围为-90~90，负数表示南纬
              console.log(res);
              that.getCategory();
              that.getPopData();
              that.getAdvice();
              that.getData();
            },
            fail() {
              wx.showToast({
                title: "无法获取地理位置",
                icon: "none",
                duration: 2000,
                mask: true
              });
              that.province_name = "湖北";
              that.province = 13;
              that.getCategory();
              that.getPopData();
              that.getAdvice();
              that.getData();
              // wx.navigateBack({
              //   delta: -10
              // });
            }
          });
        },
        fail() {
          that.province_name = "湖北";
          that.province = 13;
          that.getData();
        }
      });
    },
    get_msg() {
      let that = this;
      common.fly_post(
        "api/v4_2/user_messages/system_index",
        {
          page: 1,
          pageSize: 1000
        },
        result => {
          let res = result.data;
          if (res.status_code == 0) {
            console.log(res.data.total);
            var now_num = res.data.total;
            var old_num = wx.getStorageSync("msg_num")
              ? wx.getStorageSync("msg_num")
              : 0;
            // console.log(now_num+ '----now_num')
            //  console.log(old_num+ '----old_num')
            if (now_num - old_num > 0) {
              this.has_msg = true;
            } else {
              this.has_msg = false;
            }
          }
        }
      );
    },
    tomessage() {
      wx.navigateTo({ url: "/pages/package_main/message_list/main" });
    },
    scroll(e) {},
    get_location() {
      let that = this;
      wx.authorize({
        scope: "scope.userLocation",
        success() {
          wx.getLocation({
            type: "gcj02",
            success(res) {
              that.longitude = res.longitude; // 经度，浮点数，范围为-180~180，负数表示西经
              that.latitude = res.latitude; // 纬度，浮点数，范围为-90~90，负数表示南纬
            },
            fail() {
              common.mmk_Loading(2, "无法获取地理位置");
              that.province_name = "湖北";
              that.province = 13;

              wx.navigateBack({
                delta: -10
              });
            }
          });
        },
        fail() {
          that.province_name = "湖北";
          that.province = 13;
          that.get_tab();
        }
      });
    },
    todetail(e) {
      wx.setStorageSync("typename_life", "");
      console.log(wx.getStorageSync("typename_life") + "---640");
      console.log(e);
      var issearch = e.links.indexOf("search") == -1 ? false : true;
      var ismark1 = e.links.indexOf("mark1") == -1 ? false : true;
      var id = this.getParams(e.links, "id");
      // console.log(id)
      if (e.type == 1) {
        if (issearch && !ismark1) {
          wx.navigateTo({
            url:
              "/pages/package_lifebeauty/life_search/main?province_id=" +
              e.province_id +
              "&id=" +
              e.cate_id
          });
        } else if (issearch && ismark1) {
          // console.log('----546')
          wx.navigateTo({
            url:
              "/pages/package_lifebeauty/life_search/main?province_id=" +
              e.province_id +
              "&id=" +
              id +
              "&mark1=1"
          });
        } else {
          // wx.navigateTo({ url: "/pages/advertisement/main?url=" + e.links });
          wx.navigateTo({
            url: `/pages/package_main/advertisement/main?url=${encodeURIComponent(
              e.links
            )}`
          });
          // console.log(e.links+'---570')
        }
      } else {
        common.to_detail(e, e.type);
      }
    },
    getParams(link, name) {
      return decodeURIComponent(
        (new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(link) || [
          ,
          ""
        ])[1].replace(/\+/g, "%20")
      );
    }
  },
  onLoad(options) {
    wx.setNavigationBarColor({
      frontColor: "#ffffff", //前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000,
      backgroundColor: "#FF73A4", //背景颜色值，有效值为十六进制颜色,
      success: res => {}
    });
    wx.setNavigationBarTitle({
      title: "生活美容"
    });
    this.statusBar = wx.getSystemInfoSync().statusBarHeight;
    console.log(this.statusBar);
    if (!this.most) {
      this.most = "";
    }
    var that = this;
    // if(wx.getStorageSync("province_info")){
    //    let info = JSON.parse(wx.getStorageSync("province_info"));
    //     that.province_name = info.province_name;
    //     that.province_id = info.province_id;
    //     that.lng = info.lgd ? info.lgd : "";
    //     that.lat = info.ltd ? info.ltd : "";
    //     that.getPopData();
    //     that.getAdvice();
    //     that.getData();
    // }else{
    //    that.get_location();
    // }
    wx.getStorage({
      key: "province_info",
      success: res => {
        let info = JSON.parse(res.data);
        console.log(info);
        that.province_name = info.province_name;
        that.province_id = info.province_id;
        that.lng = info.lgd ? info.lgd : "";
        that.lat = info.ltd ? info.ltd : "";
        that.getPopData();
        that.getAdvice();
        that.getData();
      },
      fail: () => {
        that.get_location();
        // that.getPopData();
        // that.getAdvice();
        // that.getData();
      }
    });
    wx.getStorage({
      key: "user_token",
      success: res => {
        that.get_msg();
      }
    });
    this.getCategory();
  },
  onShow() {
    if (wx.getStorageSync("province_info")) {
      this.province_id = JSON.parse(
        wx.getStorageSync("province_info")
      ).province_id;
      // console.log(addressObj)
      this.province_name = JSON.parse(
        wx.getStorageSync("province_info")
      ).province_name;

      // console.log(this.has_msg);
      this.getPopData();
      this.getAdvice();
      this.getData();
    }
    var that = this;
    wx.getStorage({
      key: "user_token",
      success: res => {
        that.get_msg();
      }
    });

    // wx.removeStorageSync('typename_life')
  },
  mounted() {
    var that = this;
    setTimeout(() => {
      // 获取页面上头部元素的高度
      var query = wx.createSelectorQuery();
      query
        .select(".sitckybox")
        .boundingClientRect(function(res) {
          console.log(res.height);
          that.sticketBoxHeight = res.height;
        })
        .exec();
    }, 1000);
  }
};
</script>

<style scoped lang="less">
.container {
  height: 100%;
  // padding-bottom: 48px;
  background-color: #f3f4f6;
  background: url("https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/lifebeauty/minibg.png")
    no-repeat;
  background-size: 100% 80%;
  position: relative;
  box-sizing: border-box;
  .mask {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
  }
  .itembox {
    height: 51%;
    width: 100%;
    // background: red;
    position: fixed;
    z-index: 1000;
    background: #fff;
    bottom: 0;
    left: 0;
    border-radius: 5px 5px 0 0;
    overflow: hidden;
    transition: all 0.3s;
    .sortstyle {
      position: absolute;
      top: 8px;
      left: 0;
      z-index: 9999;
      background: #fff;
    }

    .box {
      display: flex;
      width: 100%;
      height: 100%;
      .leftlist {
        width: 50%;
        height: 100%;
        color: #1d2023;
        font-size: 14px;
        display: inline-block;
        overflow: scroll;
        .item {
          height: 40px;
          box-sizing: border-box;
          padding-left: 15px;
          line-height: 40px;
          &.item:nth-last-of-type(1) {
            margin-bottom: 40px;
          }
          &.active {
            position: relative;
            font-weight: bold;
            background: #f5f6fa;
            &::after {
              content: "";
              position: absolute;
              width: 2px;
              height: 20px;
              background: rgba(236, 88, 139, 1);
              top: 28%;
              left: 0;
            }
          }
        }
        &.right {
          height: 100%;
          overflow: scroll;
          .item1 {
            height: 40px;
            box-sizing: border-box;
            padding-left: 15px;
            line-height: 40px;
            background: #f5f6fa;
            &.item1:nth-last-of-type(1) {
              margin-bottom: 40px;
            }
            &.active {
              color: #ec588b;
              //  left: -200000px;
            }
          }
        }
      }
    }
    //    }
  }
  .fadelogIn {
    -webkit-animation: fadelogIn 0.4s;
    animation: fadelogIn 0.4s;
  }

  @keyframes fadelogIn {
    0% {
      -webkit-transform: translate3d(0, 100%, 0);
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
    }
    100% {
      -webkit-transform: none;
      transform: none;
    }
  }

  @-webkit-keyframes fadelogIn {
    0% {
      -webkit-transform: translate3d(0, 100%, 0);
    }
    100% {
      -webkit-transform: none;
    }
  }

  .contentbox {
    // padding-top: 24px;
    box-sizing: border-box;
    // height: 100%;
    .sitckybox {
      position: sticky;
      top: 0;
      z-index: 99;
      background: url("https://img.ameimeika.com/h5_images/lifebeauty/wxscroll.png")
        no-repeat;
      background-size: 100% 100%;
      // .nav {
      //   height: 59px;
      //   color: #fff;
      //   // margin-top: 24px;
      //   font-size: 17px;
      //   line-height: 80px;
      //   text-align: center;
      //   &.navitem1{
      //     height: 81px;
      //     line-height: 136px;
      //   }
      // }
      .nav {
        font-size: 17px;
        text-align: center;
        color: #fff;
        height: 45px;
        line-height: 45px;
      }
      .inpbox {
        height: 59px;
        width: 100%;
        display: flex;
        .item {
          width: 100%;
          height: 100%;
          padding: 8px 0 15px 0;
          box-sizing: border-box;
          display: flex;
          .address {
            width: 23%;
            height: 100%;
            display: inline-block;
            color: #fff;
            font-size: 14px;
            position: relative;
            margin-right: 15px;
            line-height: 36px;
            margin-left: 12px;
            box-sizing: border-box;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            .gps {
              width: 22px;
              height: 22px;
              vertical-align: middle;
            }
          }
          .box {
            width: 56%;
            display: inline-block;
            position: relative;
            .icon {
              width: 20px;
              height: 20px;
              position: absolute;
              left: 4%;
              top: 18%;
            }
            .inp {
              width: 100%;
              height: 32px;
              border-radius: 16px;
              background: #fff;
              padding-left: 38px;
              box-sizing: border-box;
              line-height: 32px;
              color: #a2abb3;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
            }
          }
          .msgbox {
            display: inline-block;
            position: relative;
            margin: 0 15px;
            width: 6.5%;
            .msg {
              width: 26px;
              height: 26px;
              position: absolute;
              top: 15%;
              // left: 15px;
            }
            .tip {
              width: 8px;
              height: 8px;
              border-radius: 50%;
              background: linear-gradient(
                180deg,
                rgba(255, 94, 122, 1) 0%,
                rgba(255, 0, 45, 1) 100%
              );
              box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5);
              border: 1px solid #fff;
              position: absolute;
              top: 11%;
              right: 0;
            }
          }
        }
      }
    }

    .top {
      width: 100%;
      height: 44px;
      box-sizing: border-box;
      padding: 0 13px 0 37px;
      position: relative;
      line-height: 44px;
      color: #fff;
      font-size: 18px;
      .gps,
      .msg,
      .sao {
        position: absolute;
      }
      .gps {
        width: 22px;
        height: 22px;
        left: 13px;
        top: 11px;
      }
      .sao {
        width: 20px;
        height: 20px;
        right: 51px;
        top: 12px;
      }
      .msg {
        width: 22px;
        height: 22px;
        right: 13px;
        top: 11px;
      }
    }

    .adlist {
      width: 94.6%;
      height: auto;
      background: #fff;
      border-radius: 10px;
      box-sizing: border-box;
      padding: 15px 0 20px;
      margin: 0 auto 16px;
      .ul {
        box-sizing: border-box;
        padding: 0 12px;
        // &.ul1{
        //   padding: 0 12px;
        // }
        width: 100%;
        display: flex;
        .li {
          width: 20%;
          text-align: center;
          // &.li:nth-of-type(1){
          //   background: red;
          // }
          .img {
            display: inline-block;
            width: 86%;
            height: 58px;
          }
          .title {
            display: inline-block;
            width: 100%;
            font-size: 12px;
            color: #3f454b;
            text-align: center;
          }
        }
      }
      .ul2 {
        height: auto;
        display: inline-block;
        text-align: center;
        padding: 0 12px;
        .li {
          width: 20%;
          display: inline-block;
          margin-top: 20px;
          .img {
            width: 30px;
            height: 30px;
            display: inline-block;
          }
        }
      }
    }
    .adbox {
      width: 100%;
      padding: 0 10px;
      box-sizing: border-box;
      padding-bottom: 10px;
      // margin-top: 20px;
      .banner {
        width: 100%;
        .img1 {
          height: 112px;
          width: 100%;
          border-radius: 5px;
          margin-bottom: 8px;
        }
      }
      .show {
        width: 100%;
        display: flex;
        box-sizing: border-box;
        .left,
        .right {
          width: 49%;
        }
        .left {
          margin-right: 8px;
          .img2 {
            width: 100%;
            height: 180px;
            border-radius: 5px;
          }
        }
        .right {
          .img3,
          .img4 {
            height: 86px;
            display: block;
            width: 100%;
            border-radius: 5px;
          }
          .img3 {
            margin-bottom: 8px;
          }
        }
      }
    }
    // 分类栏
    .typelist {
      height: 44px;
      width: 100%;
      box-sizing: border-box;
      padding: 0 15px;
      display: block;
      color: #1d2023;
      overflow-x: scroll;
      white-space: nowrap;
      display: flex;
      background: #fff;
      // line-height: 60px;
      position: sticky;
      z-index: 99;

      .li {
        width: auto;
        height: 44px;
        float: left;
        line-height: 44px;
        margin-right: 24px;
        font-size: 16px;
        &.active {
          position: relative;
          // font-weight: bold;
          font-size: 18px;
          background: url("https://img.ameimeika.com/h5_images/mp_images/mp_3.0/indexpage/rectangle@3x.png");
          background-size: 100% 5px;
          background-position: 100% 66%;
          background-repeat: no-repeat;
        }
      }
    }
    // 智能排序
    .type2 {
      width: 100%;
      height: 28px;
      margin: 0 auto;
      box-sizing: border-box;
      font-size: 14px;
      color: #3f454b;
      display: flex;
      text-align: center;
      padding-top: 8px;
      background: #fff;
      .item {
        width: 33.3%;
        height: auto;
        &.active {
          color: #ec588b;
        }
        &.active1 {
          color: #3f454b;
        }

        &.item:nth-of-type(2) {
          border-left: 1px solid #e6e6e6;
          border-right: 1px solid #e6e6e6;
        }
      }
      .img {
        width: 8px;
        height: 6px;
      }
    }
    .sort {
      position: sticky;
      z-index: 99;
    }
    .listbox {
      width: 100%;
      position: relative;
      z-index: 1;
      background: #f3f4f6;
      .empty {
        width: 100%;
        padding-bottom: 50px;
        text-align: center;
        background: #fff;
        .img {
          height: 130px;
          width: 175px;
          display: inline-block;
        }
        .text {
          color: #666;
          font-size: 14px;
        }
      }
      .bottomtext {
        width: 100%;
        height: 60px;
        font-size: 14px;
        font-weight: 400;
        color: #999;
        text-align: center;
        line-height: 60px;
        display: inline-block;
      }
    }
  }
}
</style>

